<template>
  <div>
    <van-nav-bar class="ganavbar" title="门店管理" left-arrow @click-left="$router.go(-1)">
        <template #right>
            <van-icon name="search" size="20" @click="$refs.baFilter.toggle()" />
            <span class="btntext" @click="addNew()">登记</span>
        </template>
    </van-nav-bar>

    <div class="mainbody">
     <TopTools ref="baFilter" :filters="filterConfig" @doFilter="getList(1)"/>
      <van-pull-refresh v-model="refreshing" @refresh="getList(1)" class="scroll-list">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getList"
          class="listItems">
          <div class="item mdItem" v-for="(item, index) in list" :key="index" @click="showItemDetail(item)">
            <div class="title">刘德迎</div>
            <div class="kvs">
              <div class="len">
                <div class="k">门店编码:</div><div class="v">00000{{index}}</div>
              </div>
              <div class="len">
                <div class="k">门店类型:</div><div class="v">个体工商户</div>
              </div>
              <div class="len">
                <div class="k">营业执照号:</div><div class="v">92320321MA23CQD02N</div>
              </div>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>

    <router-view class="routerview"/>
  </div>
</template>
<script>
import TopTools from '@/components/component/TopTools';
export default {
  name: "MDGL",
  components: {
      TopTools
  },
  data () {
    return {
        list: [],
        pagenum: 0,
        loading: false,
        finished: false,
        refreshing: false,

        filterConfig: [{
          label: '名称', name: 'mc', value: '', placeholder: '', type: 'text', always: 1
        }, {
          label: '门店编号', name: 'mdbh', value: '', placeholder: '', type: 'text', always: 1
        }, {
          label: '营业执照', name: 'yyzz', value: '', placeholder: '', type: 'text', always: 1
        }, {
          label: '门店店主', name: 'mddz', value: '', placeholder: '', type: 'text', always: 1
        }
      ]
    };
  },
  methods: {
    showItemDetail: function (item) {
      this.$router.push({name: 'MD_DETAIL', params: {item, mode: 'view'}});
    },
    addNew: function (item) {
      this.$router.push({name: 'MD_DETAIL', params: {mode: 'add'}});
    },
    getList (pagenum = 0) {
      var vm = this;
      if (pagenum) {
        vm.pagenum = pagenum;
      } else {
        vm.pagenum++;
      }
      vm.refreshing = false;
      // 如果第一页起  
      if (vm.pagenum == 1) {
        vm.list = [];
        vm.finished = false;
      }
      vm.loading = true;
    //   var filterValue = this.$util.stringify(this.$refs.baFilter.getFilterValue());
      var filterValue = '';
      this.$getAndLoad('门店列表', 'getList.jsp?pagesize=10&pagenum=' + vm.pagenum + '&' + filterValue, function (data) {
        data.forEach(n => {
          vm.list.push(n);
        });
        if (data.length < 10) {
          vm.finished = true;
        }
        vm.loading = false;
      });
    }
  },
  mounted: function () {
  }
};
</script>

<style lang="scss" scoped>
</style>
